<template>
  <div>
    <h2 class="section-title">核心价值观</h2>

  <section
    class="brand-values-split"
    :style="{ backgroundImage: `url(${values[selected].image})` }"
  >

    <!-- 居中标题 -->
    <div class="overlay" />


    <div class="split-wrapper">
      <!-- 左侧导航 -->
      <div class="value-nav">
        <div
          v-for="(item, i) in values"
          :key="item.name"
          class="nav-item"
          :style="getFanStyle(i)"
          @mouseenter="selected = i"
          :class="{ active: selected === i }"
        >
          <div class="nav-label">{{ item.name }}</div>
          <img :src="item.thumb" class="thumb" />
        </div>
      </div>

      <!-- 右侧描述，仅显示详情内容，不含小标题 -->
      <div class="value-detail">
        <p class="desc">{{ values[selected].description }}</p>
      </div>
    </div>
  </section>
  </div>

</template>

<script setup>
import { ref } from 'vue'

const values = [
  {
    name: '质量至上',
    image: '/mock-bg.jpg',
    thumb: '/mock-bg.jpg',
    description: '严选火山豆，匠心烘焙，确保每一杯都有稳定而纯粹的风味。'
  },
  {
    name: '持续创新',
    image: '/mock-bg.jpg',
    thumb: '/mock-bg.jpg',
    description: '探索前沿烘焙技法，打破风味边界，为咖啡注入无限可能。'
  },
  {
    name: '环境友好',
    image: '/mock-bg.jpg',
    thumb: '/mock-bg.jpg',
    description: '我们坚持可持续采购、回收再利用，用咖啡行动守护地球。'
  }
]

const selected = ref(0)

function getFanStyle(i) {
  const total = values.length
  const angle = -45 + (90 / (total - 1)) * i
  const radius = 100
  const x = radius * Math.cos((angle * Math.PI) / 180)
  const y = radius * Math.sin((angle * Math.PI) / 180)
  return {
    transform: `translate(${x}px, ${y}px)`
  }
}
</script>

<style scoped>
.brand-values-split {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 20px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  color: #fff;
  overflow: hidden;
}
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
  z-index: 1;
}
.section-title {
  font-size: 32px;
  font-weight: 600;
  color: #4a2e18;
  letter-spacing: 1px;
  margin-bottom: 48px;
  position: relative;
  text-align: center;
  display: block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #c19a6b, #ffb46a);
  border-radius: 2px;
  opacity: 0.8;
}

.split-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* 左侧扇形导航 */
.value-nav {
  position: relative;
  width: 240px;
  height: 200px;
}
.nav-item {
  position: absolute;
  top: 50%;
  /* left: 50%; */
  display: flex;
  align-items: center;
  gap: 20px;
  transform-origin: center;
  transition: all 0.3s ease;
  filter: grayscale(100%) brightness(0.75);
  cursor: pointer;
}
.nav-item.active {
  filter: none;
  z-index: 3;
  transform: scale(1.1) translate(-50%, -50%);
}
.thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.nav-label {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

/* 右侧说明区域（保留） */
.value-detail {
  width: 440px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.desc {
  font-size: 15px;
  line-height: 1.8;
  color: #eee;
  text-align: center;
}
</style>
